<template>
    <div class="index-container">
        <el-row>
            <el-col :span="18" style="border-right: 1px solid #f1e8e8;">
                <Header :form="form" @handleSetForm="handleSetForm"></Header>
                <el-row>
                    <el-col :span="7">
                        <AssemblyList></AssemblyList>
                    </el-col>
                    <el-col :span="17">
                        <Drop :form="form"
                              :indexParam="indexParam"
                              @handleSetFormList="handleSetFormList"
                              @handleDelete="handleDelete"
                              @handleInitRightData="handleInitRightData"
                              @handleGetSettingIndex="handleGetSettingIndex">
                        </Drop>
                    </el-col>
                </el-row>
            </el-col>
            <el-col :span="6" id="right-container-temp">
                <Right :showSetting="showSetting" :currentComponent="currentComponent"></Right>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import Header from "../components/Header/Header";
    import Right from "../components/Right/Right";
    import AssemblyList from "../components/Assembly/AssemblyList";
    import Drop from "../components/Drop/Drop";
    import Vue from 'vue';
    import {Col, Row} from 'element-ui'

    Vue.use(Row);
    Vue.use(Col);

    export default {
        name: 'Index',
        data() {
            return {
                form: {
                    name: '表单名称',
                    labelPosition: 'right',
                    formList: []//组件列表
                },
                indexParam: {
                    groupIndex: -1,
                    commonIndex: -1,
                },
                currentComponent: {},
                showSetting: false
            }
        },
        components: {
            Header,
            Right,
            AssemblyList,
            Drop,
        },
        methods: {
            /**
             * 设置表单信息
             * @param data
             */
            handleSetForm(data) {
                this.form = data;
            },
            /**
             * 设置组件列表
             * @param data
             */
            handleSetFormList(data) {
                const formList = this.form.formList;
                this.handleInitRightData();
                Vue.set(formList, data.index, data.newItem);
            },
            /**
             * 设置组件
             * @param indexParam
             */
            handleGetSettingIndex(indexParam) {
                const formList = this.form.formList;
                this.indexParam = indexParam;
                let currentComponent = {};
                if (indexParam.commonIndex > -1) {
                    currentComponent = formList[indexParam.groupIndex].child[indexParam.commonIndex];
                } else {
                    currentComponent = formList[indexParam.groupIndex];
                }
                this.showSetting = true;
                console.log(currentComponent)
                this.currentComponent = currentComponent;
            },
            /**
             * 删除组件
             * @param indexParam
             */
            handleDelete(indexParam) {
                const formList = this.form.formList;
                this.handleInitRightData();
                if (indexParam.commonIndex > -1) {
                    const child = formList[indexParam.groupIndex].child;
                    Vue.delete(child, indexParam.commonIndex);
                } else {
                    Vue.delete(formList, indexParam.groupIndex);
                }
            },
            /**
             * 初始化数据
             */
            handleInitRightData() {
                this.showSetting = false;
                this.indexParam = {
                    groupIndex: -1,
                    commonIndex: -1,
                };
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
